<template>
  <div class="app-container">
    <el-form :inline="true" v-if="showSelect">
      <el-form-item label="日期：">
        <el-date-picker
          v-model="date"
          type="date"
          placeholder="查询日期"
          style="width: 220px"
          format="yyyy-MM-dd 星期dddd"
          autocomplete="off"
          @change="getList"></el-date-picker>
      </el-form-item>
      <el-form-item label="班次代码：">
        <el-radio-group v-model="BcDm" @change="getList">
          <el-radio label="白班">白班</el-radio>
          <el-radio label="夜班">夜班</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div style="height: 100%; width: 100%; background: rgb(30, 53, 68)">
      <H1 slot="header" style="text-align: center; color: rgb(247, 248, 249); padding-top: 10px">注塑产能报表</H1>
      <div style="color: #ffd700; text-align: center; font-size: 14px">
        {{ !showSelect ? '当前实时时间：' + nowTime : '日期：' + $moment(date).format('YYYY年MM月DD日') }} 班次：{{ BcDm }}
      </div>

      <div style="display: flex; margin-top: 20px">
        <div style="width: 50%; padding-left: 20px; padding-right: 10px">
          <el-table
            :row-key="keyFunc"
            border
            :data="rzmDataOne"
            :cell-style="iCellStyle"
            :cell-class-name="tableRowClassNameC"
            :header-cell-style="iHeaderCellStyle">
            <el-table-column label="机台号" :show-overflow-tooltip="true" min-width="60" align="center" prop="rzmJtbh" />
            <el-table-column label="专用号" :show-overflow-tooltip="true" min-width="80" align="center" prop="itmCustWldm" />
            <el-table-column label="品名" :show-overflow-tooltip="true" style="color: #00cf00" min-width="190" prop="itmPmgg"></el-table-column>
            <el-table-column label="H1" :show-overflow-tooltip="true" min-width="55" align="center" prop="eightNum"></el-table-column>
            <el-table-column label="H2" :show-overflow-tooltip="true" min-width="55" align="center" prop="elevenNum"></el-table-column>
            <el-table-column label="H3" :show-overflow-tooltip="true" min-width="55" align="center" prop="fourthNum"></el-table-column>
            <el-table-column label="H4" :show-overflow-tooltip="true" min-width="55" align="center" prop="seventeenNum" />
            <el-table-column label="累计不良" :show-overflow-tooltip="true" align="center" min-width="90" prop="totalBl" />
            <el-table-column label="累计产出" :show-overflow-tooltip="true" align="center" min-width="80" prop="totalNum" />
          </el-table>
        </div>

        <div style="width: 50%; padding-left: 10px; padding-right: 20px">
          <el-table id="NoPlanAssign" border :data="rzmDataTwo" :cell-style="iCellStyle" :header-cell-style="iHeaderCellStyle">
            <el-table-column label="机台号" :show-overflow-tooltip="true" min-width="60" align="center" prop="rzmJtbh" />
            <el-table-column label="专用号" :show-overflow-tooltip="true" min-width="80" align="center" prop="itmCustWldm" />
            <el-table-column label="品名" :show-overflow-tooltip="true" min-width="190" prop="itmPmgg" />
            <el-table-column label="H1" :show-overflow-tooltip="true" min-width="55" align="center" prop="eightNum" />
            <el-table-column label="H2" :show-overflow-tooltip="true" min-width="55" align="center" prop="elevenNum" />
            <el-table-column label="H3" :show-overflow-tooltip="true" min-width="55" align="center" prop="fourthNum" />
            <el-table-column label="H4" :show-overflow-tooltip="true" min-width="55" align="center" prop="seventeenNum" />
            <el-table-column label="累计不良" :show-overflow-tooltip="true" align="center" min-width="90" prop="totalBl" />
            <el-table-column label="累计产出" :show-overflow-tooltip="true" min-width="80" align="center" prop="totalNum" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BoardService from '@/api/board/board'

export default {
  name: 'ProInjectionAnalyse',
  props: {
    select: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      rzmDataOne: [],
      rzmDataTwo: [],
      BcDm: '白班',
      nowTime: null,
      date: this.$moment().format('YYYY-MM-DD'),
      open: true,
      count: 0,
      timer2: null,
    }
  },
  computed: {
    showSelect() {
      return this.select || this.$route.query.select
    },
  },

  mounted() {
    this.getList()
    if (!this.showSelect) {
      if (this.taskGetList) clearInterval(this.taskGetList)
      this.taskGetList = setInterval(() => {
        this.getList()
      }, 10000)
      if (this.taskTime) clearInterval(this.taskTime)
      this.taskTime = setInterval(() => {
        this.nowTime = this.$moment().format('yyyy年MM月DD HH:mm:ss')
      }, 1000)
      this.nowTime = this.$moment().format('yyyy年MM月DD HH:mm:ss')
    } else {
      this.nowTime = this.$moment(this.date).format('yyyy年MM月DD')
    }
  },
  destroyed() {
    if (this.taskTime) clearInterval(this.taskTime)
    if (this.taskGetList) clearInterval(this.taskGetList)
  },
  methods: {
    tableRowClassNameC({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return 'success-cell'
      }
      return ''
    },
    keyFunc(row) {
      return row.id
    },
    iCellStyle: function ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        return 'padding:6px 0;color:rgb(247,248,249);height:50px;background:#0e53de;font-size: 20px; height: 50px;'
      } else {
        return 'padding:6px 0;color:rgb(247,248,249);height:50px;background:#1e3544;font-size: 20px; height: 50px;'
      }
    },
    iHeaderCellStyle: function ({ row, column, rowIndex, columnIndex }) {
      return 'padding:0px;text-align:center;background:rgb(2,81,95);color:rgb(247,248,249);height:40px;font-size: 18px;white-space:normal;'
    },
    getList() {
      if (this.showSelect) {
        BoardService.getInjectionCapacityStatusReport({
          rzmRq: this.$moment(this.date).format('YYYY-MM-DD'),
          rzmBcdm: this.BcDm === '白班' ? 'BB' : 'YB',
        }).then((res) => {
          res = res.data
          let len = Math.ceil(res.list1.length / 2)
          this.rzmDataOne = res.list1.slice(0, len)
          this.rzmDataTwo = res.list1.slice(len)
        })
      } else {
        BoardService.getInjectionCapacityStatus().then((res) => {
          res = res.data
          this.BcDm = res.bcdm
          let len = Math.ceil(res.list1.length / 2)
          this.rzmDataOne = res.list1.slice(0, len)
          this.rzmDataTwo = res.list1.slice(len)
        })
      }
    },
    backStorage() {
      // 返回上级路由并关闭当前路由
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex((item) => item.path === this.$route.path),
        1
      )
      this.$router.push({ path: '/index' })
    },
  },
}
</script>
<style lang="scss" module>
// .board {
//   height: calc(100vh - 84px);
// }
.board {
  :global {
    .el-table th > .cell {
      white-space: normal;
      display: inline;
    }
  }
  .con {
    > div {
      display: inline-block;
      margin-left: 20px;
      > span {
        font-weight: 700;
        font-size: 16px;
      }
    }
  }
}
</style>
